<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>伪元素</title>
 </head>
 <style>
		.box{
			/* position: relative; */
			width:70%;
			height:200px;
			background:#fff;
			margin:40px auto;
		}
		.box h3{
			text-align: center;
			position: relative;
			top:80px;
		}
		/*effect1的样式,底边有阴影*/
		.effect1{
			box-shadow: 0 10px 6px -6px #777;
		}
		/*effect2的样式,底角两边有阴影*/
		.effect2{
			position: relative;
		}
		.effect2::before, .effect2::after{
			z-index: -1;
			position: absolute;
			content: "";
			top: 80%;
			bottom: 15px;
			left: 10px;
			width: 50%;
			max-width: 300px;
			background: #777;
			box-shadow: 0 15px 10px #777;
			transform: rotate(-3deg);
		}
		.effect2::after{
			right: 10px;
			transform: rotate(3deg);
			left: auto;
		}
		/*effect3的样式,底角左边有阴影*/
		.effect3{
			position: relative;
		}
		.effect3::before{
			position: absolute;
			z-index: -1;
			content: "";
			top: 80%;
			bottom: 15px;
			left: 10px;
			width: 50%;
			max-width: 300px;
			background: #777;
			box-shadow: 0 15px 10px #777;
			transform: rotate(-3deg);
		}
		/*effect4的样式,底角右边有阴影*/
		.effect4{
			position: relative;
		}
		.effect4::after{
			position: absolute;
			z-index: -1;
			content: "";
			top: 80%;
			bottom: 15px;
			left: auto;
			right: 10px;
			width: 50%;
			max-width: 300px;
			background: #777;
			box-shadow: 0 15px 10px #777;
			transform: rotate(3deg);
		}
		/*effect5的样式,底角两边有阴影,有点大*/
		.effect5{
			position: relative;
		}
		.effect5::before, .effect5::after{
			position: absolute;
			z-index: -1;
			content: "";
			top: 80%;
			bottom: 25px;
			left: 10px;
			width: 50%;
			max-width: 300px;
			background: #777;
			box-shadow: 0 35px 20px #777;
			transform: rotate(-8deg);
		}
		.effect5::after{
			right: 10px;
			transform: rotate(8deg);
			left: auto;
		}
		/*effect6的样式,下边有阴影*/
		.effect6{
  			position:relative;       
			box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
		}
		.effect6::before , .effect6::after{
			z-index: -1;
			position:absolute;
			content: "";
			top: 50%;
			box-shadow:0 0 20px rgba(0,0,0,0.8);
			bottom:0;
			left:10px;
			right:10px;
			border-radius:100px / 10px;
		}
		/*effect7的样式,上下两边有阴影*/
		.effect7{
  			position:relative;       
			box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
		}
		.effect7::before , .effect7::after{
			z-index: -1;
			position:absolute;
			content: "";
			top: 0;
			box-shadow:0 0 20px rgba(0,0,0,0.8);
			bottom:0;
			left:10px;
			right:10px;
			border-radius:100px / 10px;
		}
		/* .effect7::before{
			top:0;
		} */
		.effect7:after{
			right:10px; 
			left:auto; 
			transform:skew(8deg) rotate(3deg);
		}
		/*effect7的样式,左右两边有阴影*/
		.effect8{
  			position:relative;       
			box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
		}
		.effect8::before , .effect8::after{
			z-index: -1;
			position:absolute;
			content: "";
			top: 10px;
			box-shadow:0 0 20px rgba(0,0,0,0.8);
			bottom:10px;
			left:0;
			right:0;
			border-radius:100px / 10px;
		}
		.effect8:after{
			right:10px; 
			left:auto; 
			transform:skew(8deg) rotate(3deg);
		}
 </style>
 <body>
		<div class="box effect1">
			<h3>effect1</h3>
		</div>
		<div class="box effect2">
			<h3>effect2</h3>
		</div>
		<div class="box effect3">
			<h3>effect3</h3>
		</div>
		<div class="box effect4">
			<h3>effect4</h3>
		</div>
		<div class="box effect5">
			<h3>effect5</h3>
		</div>
		<div class="box effect6">
			<h3>effect6</h3>
		</div>
		<div class="box effect7">
			<h3>effect7</h3>
		</div>
		<div class="box effect8">
			<h3>effect8</h3>
		</div>
 </body>
</html>
